<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue的资源 -->
		<script src="js/vue.js"></script>
		<!-- 引入网络请求库axios的资源 -->
		<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="getMsg()">
				获取数据
			</button>
			<ul>
				<li v-for="item in joke">{{item}}</li>
			</ul>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					joke:[]
				},
				methods:{
					getMsg:function(){
						// 在方法中，this指向vue对象，当发送请求后，this指向为window
						console.log(this)
						// 需要使用vue对象，可以将vue保存后，再引用
						var that=this
						
						// 通过axios的网络请求库发送get请求
						axios.get("https://autumnfish.cn/api/joke/list?num=3").
						then(function(response){
							console.log(this)
							console.log(response)
							that.joke=response.data.data
						}).
						catch(function(err){    
							
						})
						
					}
				}
			})		
		
		</script>
		
		
		
		
	</body>
</html>
